<template>
  <div class="overview">
    <mt-header :title="app.name">
      <mt-button @click="$router.go(-1)" slot="left" icon="back">返回</mt-button>
    </mt-header>

    <mt-tab-container v-model="active">
      <!-- 登录 -->
      <mt-tab-container-item id="login">
        <el-form @submit.native.prevent>
          <el-form-item>
            <el-input v-model="record.username" placeholder="用户名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="record.password" type="password" placeholder="密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-input v-model="record.code" placeholder="验证码" disabled></el-input>
              </el-col>
              <el-col :span="8">
                <mt-button class="login-btn" :disabled="limit < 60" @click="sendCode">
                  {{ LIMIT > limit ? `重试 ${limit}s` : '发送' }}
                </mt-button>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <mt-button
              class="login-btn"
              type="primary"
              @click="submit">
              登录
            </mt-button>
          </el-form-item>

          <el-form-item>
            <mt-button
              class="login-btn"
              @click="switchPanel('singup')">
              前去注册
            </mt-button>
          </el-form-item>
        </el-form>
      </mt-tab-container-item>

      <!-- 注册 -->
      <mt-tab-container-item id="singup">
        <el-form @submit.native.prevent>
          <el-form-item>
            <el-input v-model="record.username" placeholder="用户名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="record.password" type="password" placeholder="密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-input v-model="record.repeatPassword" type="password" placeholder="确认密码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-input v-model="record.code" placeholder="验证码" disabled></el-input>
              </el-col>
              <el-col :span="8">
                <el-button class="login-btn" :disabled="limit < 60" @click="sendCode">
                  {{ LIMIT > limit ? `重试 ${limit}s` : '发送' }}
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <mt-button
              class="login-btn"
              type="primary"
              @click="submit">
              注册
            </mt-button>
          </el-form-item>

          <el-form-item>
            <mt-button
              class="login-btn"
              @click="switchPanel('login')">
              前去登录
            </mt-button>
          </el-form-item>
        </el-form>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import { Form, FormItem, Input, Row, Col, Button } from 'element-ui'
import { Header, Button as MtButton, TabContainer, TabContainerItem } from 'mint-ui'
import { SHA256 } from 'crypto-js'

import { httpGet, httpPost } from '~/lib/api'

export default {
  name: 'overview',
  components: {
    'el-form': Form,
    'el-form-item': FormItem,
    'el-input': Input,
    'el-row': Row,
    'el-col': Col,
    'el-button': Button,
    'mt-header': Header,
    'mt-button': MtButton,
    'mt-tab-container': TabContainer,
    'mt-tab-container-item': TabContainerItem,
  },
  data() {
    return {
      LIMIT: 60,
      limit: 60,
      time: 0,
      app: {
        name: '登录验证',
        code: this.$route.query.code,
        address: this.$route.query.address,
      },
      active: 'login',
      record: {
        username: '',
        password: '',
        repeatPassword: '',
        phone: '',
        code: '1234',
      },
    }
  },
  methods: {
    loadApp() {
      if (!this.app.code) {
        return
      }
      httpGet(`/app/${this.app.code}`).then((response) => {
        this.app = response.data
      })
    },
    timer() {
      clearInterval(this.time)
      this.time = setInterval(() => {
        if (this.limit > 1) {
          this.limit -= 1
        } else {
          clearInterval(this.time)
          this.limit = this.LIMIT
        }
      }, 1000)
    },
    switchPanel(active = 'login') {
      this.record.password = ''
      this.record.repeatPassword = ''
      clearInterval(this.time)
      this.code = ''
      this.active = active
      this.limit = this.LIMIT
    },
    sendCode() {
      this.timer()
    },
    submit() {
      const data = { ...this.record }
      if (!data.username) {
        this.$toast('用户名不能为空', 'bottom')
        return
      }
      if (!data.password) {
        this.$toast('密码不能为空', 'bottom')
        return
      }
      if (!data.code) {
        this.$toast('验证码不能为空', 'bottom')
        return
      }
      if (this.active === 'login') {
        data.password = SHA256(data.password).toString()
        httpPost('/login', data).then((response) => {
          const address = this.app.address || 'http://www.wivwiv.com'
          this.$indicator.open('登陆成功，跳转中')
          window.location.href = `${address}/auth?token=${response.data.password}`
        }).catch((error) => {
          this.$toast(error, 'bottom')
        })
      } else {
        if (data.password !== this.record.repeatPassword) {
          this.$toast('前后密码不一致', 'bottom')
          return
        }
        data.password = SHA256(data.password).toString()
        httpPost('/singup', data).then(() => {
          this.$toast('注册成功', 'bottom')
          setTimeout(() => {
            this.switchPanel('login')
          }, 500)
        }).catch((error) => {
          this.$toast(error, 'bottom')
        })
      }
    },
  },
  created() {
    this.loadApp()
  },
}
</script>

<style lang="scss">
.overview {
  .mint-header {
    font-size: 16px;
  }
  .el-input {
    .el-input__inner {
      height: 46px;
      border-radius: 46px;
    }
  }
  .login-btn {
    width: 100%;
    height: 46px;
    border-radius: 46px;
  }
  .mint-tab-container-item {
    margin-top: 50px;
    width: 100%;
    padding: 20px;
  }
}
</style>
